<template>
    <div>
      <div style="margin-bottom: 10px">
        <Button type="primary" @click="tous">新增投诉</Button>
      </div>
      <Table border :columns="columns1" :data="datalist">
        <template slot-scope="{ row }" slot="state">
         <div v-if="row.state==='0'">未处理</div>
          <div v-if="row.state==='1'">已处理</div>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px" @click="update(row)" v-if="row.state==0">审批</Button>
          <Button type="error" size="small" @click="remove(row)">删除</Button>
          <Button type="success" size="small" @click="info(row)" style="margin-left: 5px">详情</Button>
        </template>
      </Table>
      <Page class="page_style" :total="totalnum" :current="currentPageNo"
            :page-size="currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size"/>
      <Modal
        v-model="modal"
        title="新增投诉"
        @on-ok="ok">
        <template>
          <Form :model="formItem" :label-width="80">
            <FormItem label="区:">
              <Select v-model="searchInfo.level1" transfer="" @on-change="getMailList(JSON.parse(searchInfo.level1).id,1)" style="width: 100%;">
                <Option :value="JSON.stringify(item)" v-for="item in mailList[0]" v-bind:key="item.id">{{item.title}}</Option>
              </Select>
            </FormItem>
            <FormItem label="街道：">
              <Select v-model="searchInfo.level2" transfer="" @on-change="getMailList(JSON.parse(searchInfo.level2).id,2)" style="width: 100%;">
                <Option :value="JSON.stringify(item)" v-for="item in mailList[1]" v-bind:key="item.id">{{item.title}}</Option>
              </Select>
            </FormItem>
            <FormItem label="社区：">
              <Select v-model="searchInfo.level3" transfer="" @on-change="getMailList(JSON.parse(searchInfo.level2).id,3)" style="width: 100%;">
                <Option :value="JSON.stringify(item)" v-for="item in mailList[2]" v-bind:key="item.id">{{item.title}}</Option>
              </Select>
            </FormItem>
            <FormItem label="投诉原因:">
              <Input v-model="formItem.tsyy" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="投诉原因"></Input>
            </FormItem>
          </Form>
        </template>
      </Modal>
      <Modal
        v-model="modal2"
        title="详情"
      >
        <template>
          <Form :model="formItem" :label-width="80">
            <FormItem label="区: ">
              <Input v-model="formItem.btsq" ></Input>
            </FormItem>
            <FormItem label="街道：">
              <Input v-model="formItem.btsjd" ></Input>
            </FormItem>
            <FormItem label="社区：">
              <Input v-model="formItem.btssq" ></Input>
            </FormItem>
            <FormItem label="投诉原因:">
              <Input v-model="formItem.tsyy" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="投诉原因"></Input>
            </FormItem>
          </Form>
        </template>
      </Modal>
    </div>
</template>

<script>

import { auditTSList, saveComplaint, updateComplaintInfo, deleteComplaintInfo, getTSInfo } from '@/api/serviceSupervision'
import { getMailLevelList } from '@/api/eventlist'
export default {
  name: 'index',
  data () {
    return {
      modal2: false,
      mailList: [],
      searchInfo: { level1: 0 },
      loadData: true,
      columns1: [
        { title: '被投诉人所在区', key: 'btsq' },
        { title: '被投诉人所在街道', key: 'btsjd' },
        { title: '被投诉人所在社区', key: 'btssq' },
        { title: '投诉处理状态', slot: 'state' },
        { title: '投诉时间', key: 'create_time' },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      datalist: [],
      totalnum: 0,
      currentPageNo: 1,
      currentPageSize: 10,
      modal: false,
      formItem: {}
    }
  },
  methods: {
    tous () {
      this.modal = true
      this.formItem = {}
    },
    info (row) {
      console.log(row)
      getTSInfo({ id: row.id }).then(res => {
        if (res.data.errcode === 0) {
          this.formItem = res.data.data
          this.modal2 = true
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询失败' })
        }
      })
    },
    getMailList (id, index) {
      if (this.searchInfo.level1) {
        this.formItem.btsq = JSON.parse(this.searchInfo.level1).whole_address
        // console.log(this.formItem.qu)
      }
      if (this.searchInfo.level2) {
        this.formItem.btsjd = JSON.parse(this.searchInfo.level2).whole_address
      }
      if (this.searchInfo.level3) {
        this.formItem.btssq = JSON.parse(this.searchInfo.level3).title
      }
      if (id === 0) {
        this.mailList[index] = []
        this.searchInfo['level' + (index + 1)] = ''
        return
      }
      getMailLevelList({ id: id }).then(res => {
        if (res.data.errcode === 0) {
          this.mailList[index] = res.data.data
          this.mailList[index].unshift({ id: 0, title: '全部' })
          this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    },
    remove (e) {
      let data = {
        id: e.id
      }
      deleteComplaintInfo(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({
            title: '删除成功',
            desc: ret.data.errmsg
          })
          this.init()
        } else {
          this.$Notice.error({
            title: '删除失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    update (e) {
      let data = {
        id: e.id,
        state: '1'
      }
      updateComplaintInfo(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({
            title: '审批成功',
            desc: ret.data.errmsg
          })
          this.init()
        } else {
          this.$Notice.error({
            title: '审批失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    ok () {
      let data = this.formItem
      saveComplaint(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({
            title: '创建成功',
            desc: ret.data.errmsg
          })
          this.modal = false
          this.formItem = {}
          this.init()
        } else {
          this.$Notice.error({
            title: '创建失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    changePageNo (pageSize) {
      console.log(pageSize)
      this.currentPageNo = pageSize
      this.init()
    },
    size (pageSize) {
      this.currentPageSize = pageSize
      this.changePageNo()
    },
    init () {
      let data = {
        pageNo: this.currentPageNo,
        pageSize: this.currentPageSize
      }
      auditTSList(data).then(res => {
        console.log(res.data)
        if (res.data.errcode === 0) {
          this.datalist = res.data.data.results
          this.totalnum = res.data.data.totalRecord
          this.loadData = false
        }
      })
    }
  },
  mounted () {
    this.init()
    this.getMailList(null, 0)
  }
}
</script>

<style scoped>
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
  .buttons{
    display: flex;
    margin-left: 10px;
  }
</style>
